<template>
  <div class="plan-info">
    <div class="header-fixed">
      <van-nav-bar fixed left-arrow @click-left="onClickLeft" />
      <van-search
        class="search-input"
        v-model="value"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      />
    </div>
    <div class="explain">
      <p>
        说明:
        <br />产品名称 | 保障范围 | 投保方案 | 延长公里 | 保额
      </p>
    </div>
    <div>
      <van-index-bar>
        <van-index-anchor index="A" />
        <van-cell title="奥迪A4 | 原厂保修 | 3+1 | 100000 | 300000" />
        <van-cell title="奥迪A4 | 原厂保修 | 3+1 | 100000 | 300000" />
        <van-cell title="奥迪A4 | 原厂保修 | 3+1 | 100000 | 300000" />
        <van-index-anchor index="B" />
        <van-cell title="宝马325 | 原厂保修 | 3+1 | 150000 | 270000" />
        <van-cell title="宝马325 | 原厂保修 | 3+1 | 150000 | 270000" />
        <van-cell title="宝马325 | 原厂保修 | 3+1 | 150000 | 270000" />
        <van-index-anchor index="C" />
        <van-cell title="雪铁龙C6 | 原厂保修 | 3+1 | 100000 | 200000" />
        <van-cell title="雪铁龙C6 | 原厂保修 | 3+1 | 100000 | 200000" />
        <van-cell title="雪铁龙C6 | 原厂保修 | 3+1 | 100000 | 200000" />
        <van-index-anchor index="D" />
        <van-cell title="东风汽车SUV | 原厂保修 | 3+1 | 110000 | 210000" />
        <van-cell title="东风汽车SUV | 原厂保修 | 3+1 | 110000 | 210000" />
        <van-cell title="东风汽车SUV | 原厂保修 | 3+1 | 110000 | 210000" />
        <van-index-anchor index="E" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="F" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="G" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="H" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="I" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="J" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="K" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="L" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="M" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="N" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="O" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="P" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="Q" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="R" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="S" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="T" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="U" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="V" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="W" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="X" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="Y" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="Z" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
      </van-index-bar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onSearch (value) {
      console.log(value)
    }
  }
}
</script>

<style scope lang="less">
.plan-info {
  .header-fixed {
    z-index: 111;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .search-input {
    z-index: 111;
    position: absolute;
    top: 0px;
    left: 11%;
    width: 85%;
    height: 45px;
  }
  .explain {
    width: 92%;
    text-align: left;
    margin: 64px 4% 18px;
    p {
      font-size: 16px;
    }
  }
  .van-index-anchor--sticky {
    top: 40px;
    background-color: rgb(240, 240, 240);
  }
  .van-index-anchor {
    height: 42px;
    line-height: 42px;
    margin-top: 6px;
    background-color: rgb(246, 246, 246);
    border-bottom: 1px solid rgb(233, 232, 232);
  }
  .van-index-bar__index {
    font-size: 15px;
    margin-top: 4px;
  }
  .van-index-bar__sidebar {
    top: 55%;
  }
  .van-nav-bar .van-icon {
    color: #000000;
  }
}
</style>
